<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>


<div id="element-tb-mm" style="width:100px;">
<#list list as item>
        <div onclick="addElement(${item.id})">${item.text}</div>
 </#list>      
</div>
<div id="element-tb" >
	<a href="#"  class="easyui-menubutton" data-options="iconCls:'icon-add',menu:'#element-tb-mm',plain:true" >添加</a>
	<a href="#" class="easyui-linkbutton tngou-btn-element" data-options="iconCls:'icon-edit',plain:true,disabled:true" >编辑</a>
	<a href="#" class="easyui-linkbutton tngou-btn-element"  data-options="iconCls:'icon-cut',plain:true,disabled:true" >删除</a>						
	<span style="float:right;margin-right: 15px;"> 
		<input id="user-search" class="searchbox">
	</span>
</div>

<!-- 右键菜单 -->
<div id="element-menu" class="easyui-menu" style="width:120px;">
	<div data-options="iconCls:'icon-edit'">编辑数据</div>		
	<div data-options="iconCls:'icon-cut'">删除数据</div>	
</div>

	<section class="easyui-layout" style="width:100%;height:100%;">
			<table id="element-table" class="easyui-datagrid"
				style="width:100%;height:100%;"
				data-options="
				toolbar:'#element-tb',
            	url:'${Domain}api/element',
                rownumbers: true,               
                animate: true,
                collapsible: true,
                fitColumns: true,
                pagination:true,
                loadMsg:'数据加载中……',
                fitColumns:true,
                pageSize:20,
                onRowContextMenu:onRowContextMenu_element,
                method: 'post'">
				<thead>
					<tr>
						<th data-options="field:'',checkbox:true"></th>
						<th data-options="field:'id'">编号</th>
						<th data-options="field:'name',width:1">名称</th>
						<th data-options="field:'pinyin'">拼音</th>
						<th data-options="field:'description',width:1">描述</th>
						<th data-options="field:'attribute'">元素</th>
						<th data-options="field:'beasdata'">数据</th>										
					</tr>
				</thead>
		</table>
		
<script type="text/javascript">
		

	$('#element-table').datagrid({
		onLoadSuccess : function(index, row) {//加载
			$('.tngou-btn-element').linkbutton('disable');
		},
		onSelect : function(index, row) {//高亮选择
			$('.tngou-btn-element').linkbutton('enable');				
		}
	});
	function onRowContextMenu_element(e, rowIndex, rowData) {
			e.preventDefault();
			$('#element-table').datagrid('selectRow', rowIndex)
			$('#element-menu').menu('show', {
				left : e.pageX,
				top : e.pageY
			});
			
			
		}	

		//添加
		function addElement(id)
		{		
			$('#tngou-win').panel('resize',{width: 600,height: 500});
			$('#tngou-win').window('open');
			$('#tngou-win').window('setTitle','添加元素');
			$('#tngou-win').window('refresh', '${Domain}my/element/add/'+id);			
		}
			
</script>

	</section>

</body>
</html>